<template>
  <el-container style="height:1070px;background-color: #06134A">
    <!--抬头区域-->
    <el-header style="height: 10.5%" class="headerbackgroud">
      <div style="color: white;font-size: 30px;text-align: center;margin-top: 20px;margin-left: 70px">特种设备检测监测云平台</div>
      <el-card style="width:150px;height:50px;text-align:left;margin-left:80px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 6px;margin-top: -10px">
          大连特种设备工业有限公司
        </div>
      </el-card>
      <el-card style="width:127px;height:60px;align-items:right;margin-left:1600px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 2px;margin-top: -8px">
          {{dateFormat(date)}}
        </div>
      </el-card>
    </el-header>

    <el-main style="height: 50%">
      <el-header style="height: 15%;border: 1px solid #3b7cbd; box-shadow: 0 2px 12px 0 #f6f6f6;margin-bottom: 5px;margin-top: -10px">
        <el-container style="margin-left:-20px;height: 100%;width: 100%">
          <el-form :inline="true" class="demo-form-inline" style="margin-top: 20px;margin-left: 10px">
            <el-form-item label="省份">
              <el-select v-model="formInline.region" placeholder="山东省" >
                <el-option label="山东省" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="地区">
              <el-select v-model="formInline.area" placeholder="青岛市">
                <el-option label="威海市" value="shanghai"></el-option>
                <el-option label="青岛市" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司">
              <el-select v-model="formInline.company" placeholder="公司">
                <el-option label="青岛前湾联合有限公司" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button style="color: #009bfe">查询</el-button>
            </el-form-item>
          </el-form>
        </el-container>
      </el-header>
      <el-footer style="height: 80%;width: 100%;border: 1px solid #3b7cbd; box-shadow: 0 2px 12px 0 #f6f6f6">
        <el-container style="height: 100%;width: 100%;border:1px solid #bd251f; box-shadow: 0 2px 12px 0 #f6f6f6">
          <el-aside style="height: 100%;width: 33.3%;border: 1px solid #3b7cbd; box-shadow: 0 2px 12px 0 #f6f6f6">
            <pie-chart></pie-chart>
          </el-aside>

          <el-aside style="height: 100%;width: 33.3%;border: 1px solid #3b7cbd; box-shadow: 0 2px 12px 0 #f6f6f6">
            <el-container style="width:100%;height:100%;border: 1px solid #3b7cbd; box-shadow: 0 2px 12px 0 #f6f6f6">
              <baidu-map  id="allmap" ref="allmap" center="重庆市" :zoom="zoom" :scroll-wheel-zoom="true" ak="tMKUDeTdNWyNefPuZ5vLWHLr4k540dl2" style="margin-left: 0%" @click="getPoint">
                <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
                <bm-local-search :keyword="keyword"  zoom="12.8" style="display: none"></bm-local-search>
              </baidu-map>

            </el-container>

          </el-aside>
          <el-aside style="height: 100%;width: 33.3%;border: 1px solid #3b7cbd; box-shadow: 0 2px 12px 0 #f6f6f6">
            <BarChart></BarChart>
          </el-aside>
        </el-container>
      </el-footer>
    </el-main>

    <el-footer style="height: 30%">
      <el-container style="margin-top:-10px;height: 100%;width: 100%;border: 1px solid #3b7cbd; box-shadow: 0 2px 12px 0 #f6f6f6;margin-bottom: 5px;margin-top: -30px">
        <el-table :data="tableData" style="width: 100%;height: 100%" :row-style="getRowClass"
                  :header-cell-style="{background:'#101E44',color:'#606266'}" fit="true">
          <el-table-column
            prop="one"
            label="序列"
            width="180">
          </el-table-column>
          <el-table-column
            prop="two"
            label="设备编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="three"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="four"
            label="所在单位">
          </el-table-column>
          <el-table-column
            prop="five"
            label="使用年限">
          </el-table-column>
          <el-table-column
            prop="six"
            label="安全隐患">
          </el-table-column>
          <el-table-column
            prop="seven"
            label="健康诊断">
          </el-table-column>
          <el-table-column
            prop="eight"
            label="故障预测">
          </el-table-column>
          <el-table-column
            prop="nine"
            label="运城维护">
          </el-table-column>
          <el-table-column
            prop="ten"
            label="备品备件">
          </el-table-column>
        </el-table>
      </el-container>
    </el-footer>

  </el-container>
</template>

<script>
  import PieChart from './components/PieChart'
  import BarChart from './components/BarChart'
  import 'echarts/map/js/china'

  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import BmScale from 'vue-baidu-map/components/controls/Scale'
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker'
  import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
  import BmLocalSearch from'vue-baidu-map/components/search/LocalSearch'

  export default {
    name: 'Maker',
    components: {
      PieChart,
      BarChart,
      Map,
      BaiduMap,
      BmScale,
      BmNavigation,
      BmMarkerClusterer,
      BmMarker,
      BmInfoWindow,
      BmLocalSearch
    },
    data() {
      return {
        keyword: '',  //搜索框关键词
        zoom: 12.8,   //放大比例
        date: new Date(),
        formInline: {
          region: '',
          company: '',
          area: ''
        },
        tableData: [{
          one: '1',
          two: 'KQ13063',
          three: '桥式',
          four: '铜陵华源麻业有限',
          five: '29年',
          six: '查看',
          seven: '查看',
          eight: '查看',
          nine: '查看',
          ten: '查看'
        }, {
          one: '2',
          two: 'KQ13063',
          three: '门式',
          four: '铜陵有色金属集团',
          five: '28年',
          six: '查看',
          seven: '查看',
          eight: '查看',
          nine: '查看',
          ten: '查看'
        }, {
          one: '3',
          two: 'KQ13063',
          three: '桥式',
          four: '安徽高源再生资源',
          five: '20年',
          six: '查看',
          seven: '查看',
          eight: '查看',
          nine: '查看',
          ten: '查看'
        }, {
          one: '4',
          two: 'KQ13063',
          three: '门式',
          four: '铜陵市亿邦置业有',
          five: '19年',
          six: '查看',
          seven: '查看',
          eight: '查看',
          nine: '查看',
          ten: '查看'
        }, {
          one: '5',
          two: 'KQ13063',
          three: '桥式',
          four: '铜陵市亿邦置业有',
          five: '19年',
          six: '查看',
          seven: '查看',
          eight: '查看',
          nine: '查看',
          ten: '查看'
        }, {
          one: '6',
          two: 'KQ13063',
          three: '桥式',
          four: '铜陵市亿邦置业有',
          five: '19年',
          six: '查看',
          seven: '查看',
          eight: '查看',
          nine: '查看',
          ten: '查看'
        }, {
          one: '7',
          two: 'KQ13063',
          three: '桥式',
          four: '356',
          five: '1025',
          six: '查看',
          seven: '查看',
          eight: '查看',
          nine: '查看',
          ten: '查看'
        }]
      }
    },
    mounted() {
      var _this = this //声明一个变量指向vue实例this,保证作用域一致
      this.timer = setInterval(function() {
        _this.date = new Date()//修改数据date
      }, 1000)
    },
    methods: {
      dateFormat(time) {
        var date = new Date(time)
        var year=date.getFullYear()
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1
        var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate()
        var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours()
        var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes()
        var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds()
        // 拼接
        return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
      },
      tableRowStyle({ row, rowIndex }) {
        return 'background-color: #6bb0f6;color: #72C22D'
      },
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color: #6bb0f6;color:  #72C22D;font-weight: 500;'
        }
      },
      getRowClass({ row, column, rowIndex, columnIndex }) {
        return 'background:#06134A;color:#72C22D;'
      },
      getPoint(e){    //点击地图获取一些信息，
        this.show = true;
        this.postionMap.lng = e.point.lng;     //通过  e.point.lng获取经度
        this.postionMap.lat = e.point.lat;     //通过  e.point.lat获取纬度
        this.add.jd = e.point.lng;
        this.add.wd = e.point.lat;
        this.zoom = e.target.getZoom()

        let geocoder= new BMap.Geocoder();  //创建地址解析器的实例
        geocoder.getLocation(e.point,rs=>{
          this.add.site = rs.address;
          //地址描述(string)=
          // console.log(rs.address);    //这里打印可以看到里面的详细地址信息，可以根据需求选择想要的
          // console.log(rs.addressComponents);//结构化的地址描述(object)
          // console.log(rs.addressComponents.province); //省
          // console.log(rs.addressComponents.city); //城市
          // console.log(rs.addressComponents.district); //区县
          // console.log(rs.addressComponents.street); //街道
          // console.log(rs.addressComponents.streetNumber); //门牌号
          // console.log(rs.surroundingPois); //附近的POI点(array)
          // console.log(rs.business); //商圈字段，代表此点所属的商圈(string)
        });
      },
      infoWindowClose () {
        this.show = false
      },
      infoWindowOpen () {
        //这里有个问题纠结了很久，百度的信息窗口默认有个点击其他地方就消失的事件，我没有找到
        //并且信息窗口点击一次显示，一次消失
        //于是我加了一个100毫秒的定时器，保证每次点击地图都可以展示信息窗口
        setInterval(()=>{
          this.show = true
        },100)
      }
    }
  }
</script>

<style scoped>
  .headerbackgroud{
    background-image: url("../../../../assets/screen-header.jpg");
  }
  #allmap{
    height: 100%;
    width: 100%;

    position:center;
  }
</style>
